<template>
    <div>
        <el-menu style="width: 200px; min-height: calc(100vh - 50px);" default-active="1" class="el-menu-vertical-demo" @open="handleOpen"
            @close="handleClose">
            <el-menu-item index="1">
                <el-icon><icon-menu /></el-icon>
                <span>Navigator One</span>
            </el-menu-item>
            <el-menu-item index="2">
                <el-icon><icon-menu /></el-icon>
                <span>Navigator Two</span>
            </el-menu-item>
            <el-menu-item index="3">
                <el-icon>
                    <document />
                </el-icon>
                <span>Navigator Three</span>
            </el-menu-item>
            <el-menu-item index="4">
                <el-icon>
                    <setting />
                </el-icon>
                <span>Navigator Four</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

export default {
    components: {
        Document,
        IconMenu,
        Location,
        Setting,
    },
    props: {},
    data() {
        return {
        };
    },
    watch: {},
    computed: {},
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        }

    },
    created() { },
    mounted() { }
};
</script>

<style scoped></style>